<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery解决跨域问题--闫海的个人博客-芒果小叨</title>
<meta name="keywords" content="个人博客,闫海个人博客,jQuery,jquery跨域,js跨域,跨域解决,怎样跨域" />
<meta name="description" content="应用jQuery处理跨域问题." />
<link href="/Public/Index/css/base.css" rel="stylesheet">
<link href="/Public/Index/css/new.css" rel="stylesheet">
<link rel="stylesheet" href="/Public/Index/css/animate.css">
<link rel="stylesheet" type="text/css" href="/Public/Admin/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script><script type="text/javascript">uaredirect("http://yanhai0531.com/mobile.php");</script>
<!--[if lt IE 9]>
<script src="/Public/Index/js/modernizr.js"></script>
<![endif]-->

<script type="text/javascript" src="/Public/Admin/Js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Public/Admin/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>
<script type="text/javascript">
  var url = '/index/article';
  $(function(){
    var id = '36';
    $.post(url+'/addClick',{'id':id},function(data){
        $("#pclick").html('点击数：' + data);
    });
  })
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5a97c6527b57694be765111b6a23bffc' type='text/javascript'%3E%3C/script%3E"));
</script>
</head>
<body>
<script src="/Public/Index/js/jquery.js"></script>
<div class='header animated bounceInDown'>
    <div class='wrap'>
      <div class='logo'><a data-scroll-reveal='enter from the top over 0.7s' href='/'>
         <img src='/Public/Index/images/logo.png' title='闫海的个人博客首页' alt="logo" /></a>
      </div>
      <div data-scroll-reveal='enter from the top over 0.7s' class='top-nav'>
          <ul id="topnav">
            <li><a href='/'  title='首页'>首页<span></span></a></li>
            <li><a href='/index/list/2.html' title='关于我'>关于我<span> </span></a></li><li><a href='/index/list/3.html' title='时光轴'>时光轴<span> </span></a></li><li><a href='/index/list/1.html' title='品味人生'>品味人生<span> </span></a></li><li><a href='/index/list/5.html' title='技术分享'>技术分享<span> </span></a></li>            <li><a href='/index/article/message.html'  title='给我留言'>给我留言<span></span></a></li>
          </ul>
      </div>
      <div class='clear'></div>
    </div>
</div>
<article class="blogs">
  <h1 class="t_nav">
  	<span>您当前的位置：<a href="/index.html">首页</a>&nbsp;&gt;&nbsp;
	<a href="/index/list/5.html">技术分享</a>
	&nbsp;&gt;&nbsp;<a href="/index/list/12.html">javascript</a>
	
  	</span>  <a href="/index.html" class="n1">网站首页</a>
  </h1>
  <div class="index_about">
    <h2 class="c_titile">jQuery解决跨域问题</h2>
    <p class="box_c"><span class="d_time">发布时间：2015-03-06 16:19</span><span>编辑：小叨</span><span id="pclick">点击数：156</span></p>
    <ul class="infos" style="word-break: break-all;">
      <p>&nbsp;&nbsp;&nbsp; 首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：&nbsp; &nbsp; &nbsp; &nbsp;	
 &nbsp; &nbsp; &nbsp;&nbsp; <br/></p><table border="1"><tbody><tr class="firstRow"><th>URL</th><th>说明</th><th>是否允许通信</th></tr><tr><td>http://www.a.com/a.js<br/>http://www.a.com/b.js</td><td>同一域名下</td><td>允许</td></tr><tr><td>http://www.a.com/lab/a.js<br/>http://www.a.com/script/b.js</td><td>同一域名下不同文件夹</td><td>允许</td></tr><tr><td>http://www.a.com:8000/a.js<br/>http://www.a.com/b.js</td><td>同一域名，不同端口</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>https://www.a.com/b.js</td><td>同一域名，不同协议</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>http://70.32.92.74/b.js</td><td>域名和域名对应ip</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>http://script.a.com/b.js</td><td>主域相同，子域不同</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>http://a.com/b.js</td><td>同一域名，不同二级域名（同上）</td><td>不允许（cookie这种情况下也不允许访问）</td></tr><tr><td>http://www.cnblogs.com/a.js<br/>http://www.a.com/b.js</td><td>不同域名</td><td>不允许</td></tr></tbody></table><p>&nbsp;&nbsp;&nbsp; JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。</p><p>应用jQuery处理跨域问题:</p><pre class="brush:js;toolbar:false">&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
//jQuery跨域请求
$(document).ready(function(){
&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#btn&#39;).one(&#39;click&#39;,function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方法1：
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;get&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;jsonP&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;请求地址&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;fn&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(msg){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//.....
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方法2:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.get(&#39;请求地址?fn=?&#39;,function(msg){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//.....
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&#39;jsonp&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方法3:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.getJSON(&#39;请求地址?ddd=?&#39;,{a:[{name:&#39;yanhai&#39;,age:26},{name:&#39;yanhai1&#39;,age:16},{name:&#39;yanhai2&#39;,age:22}]},function(msg){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;a=0;a&lt;msg.length;a++){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#d&quot;).append(&#39;&lt;p&gt;&lt;/p&gt;&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(msg,function(i){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;p:eq(&quot;+i+&quot;)&quot;).html(msg[i].name+&quot;:&quot;+msg[i].age);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;});
});
&lt;/script&gt;</pre><p>请求页面处理：</p><pre class="brush:php;toolbar:false">&lt;?php
$data&nbsp;=&nbsp;$_GET[a];
$cb&nbsp;=&nbsp;$_GET[&#39;ddd&#39;];
echo&nbsp;$cb.&#39;(&#39;.json_encode($data).&#39;)&#39;;</pre><p>触发click事件后会返回：</p><p>yanhai:26</p><p>yanhai1:16</p><p>yanhai2:22</p>    </ul>
    <div class="keybq">
    <p><span>关键字词</span>：jQuery,jquery跨域,js跨域,跨域解决,怎样跨域</p>
    
    </div>
    <div class="ad"> </div>
    <div class="nextinfo">
      <p>上一篇：<a href="/index/article/31.html">关于网站限制ie10以下浏览器访问的探讨</a></p>
      <p>下一篇：已经是最后一篇文章了</p>
    </div>
    <div class="otherlink">
      <h2>相关文章</h2>
      <ul>
        <li><a href="/index/article/36.html" title="jQuery解决跨域问题">jQuery解决跨域问题</a></li><li><a href="/index/article/31.html" title="关于网站限制ie10以下浏览器访问的探讨">关于网站限制ie10以下浏览器访问的探讨</a></li><li><a href="/index/article/24.html" title="jquery拖拽效果原理">jquery拖拽效果原理</a></li><li><a href="/index/article/22.html" title="JS实现窗口垂直水平居中">JS实现窗口垂直水平居中</a></li><li><a href="/index/article/21.html" title="首页焦点图轮播代码示例">首页焦点图轮播代码示例</a></li><li><a href="/index/article/20.html" title="JS写一个浮动广告">JS写一个浮动广告</a></li>        
      </ul>
    </div>
  </div>
  <aside class="right">
    <div class="news" style="margin-top:10px;">
    <h3>
	<p>最新<span>文章</span></p>
</h3>
	<ul class="rank">
		<li><a href="/index/article/49.html" title="新版网站完成50%了，继续加油吧" >新版网站完成50%了，继续加油吧</a></li><li><a href="/index/article/48.html" title="【Laravel5教程】mac+apache+mysql配置多站点(一)" >【Laravel5教程】mac+apache+mysql配置多站点(一)</a></li><li><a href="/index/article/47.html" title="Laravel5.1配置" >Laravel5.1配置</a></li><li><a href="/index/article/46.html" title="laravel5.1安装" >laravel5.1安装</a></li><li><a href="/index/article/45.html" title="初探Laravel5" >初探Laravel5</a></li><li><a href="/index/article/44.html" title="写了一个PHP框架" >写了一个PHP框架</a></li><li><a href="/index/article/42.html" title="当遇到问题时应该怎样去处理？" >当遇到问题时应该怎样去处理？</a></li><li><a href="/index/article/41.html" title="我的近况和计划" >我的近况和计划</a></li>	</ul>
<h3 class="ph">
    <p>点击<span>排行</span></p>
</h3>
	<ul class="paih">
    	<li><a href="/index/article/31.html" title="关于网站限制ie10以下浏览器访问的探讨" >关于网站限制ie10以下浏览器访问的探讨</a></li><li><a href="/index/article/46.html" title="laravel5.1安装" >laravel5.1安装</a></li><li><a href="/index/article/47.html" title="Laravel5.1配置" >Laravel5.1配置</a></li><li><a href="/index/article/45.html" title="初探Laravel5" >初探Laravel5</a></li><li><a href="/index/article/41.html" title="我的近况和计划" >我的近况和计划</a></li>	</ul>
<h3 class="links">
	<p>友情<span>链接</span></p>
</h3>
	<ul class="website">
		<li><a href="http://www.vso8.com" target="_blank">v8视频</a></li><li><a href="http://www.huanyun.net.cn" target="_blank">焕云企业管理有限公司</a></li><li><a href="http://www.sinkuo.com" target="_blank">济宁网站建设</a></li>	</ul>    </div>  
    <!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"><a class="bds_tsina"></a><a class="bds_qzone"></a><a class="bds_tqq"></a><a class="bds_renren"></a><span class="bds_more"></span><a class="shareCount"></a></div>
    <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6574585" ></script> 
    <script type="text/javascript" id="bdshell_js"></script> 
    <script type="text/javascript">

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script> 
    <!-- Baidu Button END -->   
    <a onclick="javascript:window.open('/Public/Index/images/weixin.jpg','a', 'height=600,width=600,status=no,toolbar=no,menubar=no,location=no,scrollbars=no');" class="weixin"> </a></aside> 
</article>
<footer>
  <p><a href="http://www.miitbeian.gov.cn/" target="_blank">Copyright © 2015 yanhai All Rights Reversed | 鲁ICP备15004472号-1</a> </p>
</footer>
<script src="/Public/Index/js/silder.js"></script>

<script type="text/javascript">
     if(typeof(Worker) === "undefined"){
     	$.get('/Public/Html5/html5.html', function(data){
			$('body').html(data);
		})
     }
</script>

</body>
</html>